<template>
    <div>
        <h3>修改</h3>


        <table class="table">
            <tbody>
                <tr>
                    <td>编号</td>
                    <td>
                        {{data.Hid}}
                    </td>
                </tr>
                <tr>
                    <td>房间名称</td>
                    <td>
                        <input type="text" v-model="data.Hname">
                    </td>
                </tr>
                <tr>
                    <td>价格</td>
                    <td>
                        <input type="number" v-model="data.Hmoney">
                    </td>
                </tr>
                <tr>
                    <td>状态</td>
                    <td>
                        <input type="checkbox" v-model="data.Htype">选中为启用
                    </td>
                </tr>
                <tr>
                    <td>房号</td>
                    <td>
                        <span v-for="a in vv">
                            <input type="checkbox" :value="a" v-model="fang">{{ a }} 
                        </span>
                        
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <input type="button" value="修改" @click="update">&emsp;
                        <a href="/">返回列表</a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">

import { ref,onMounted } from 'vue';
import { useRouter,useRoute } from 'vue-router';
import axios from 'axios';

const router=useRouter()
const route=useRoute()

const fang=ref()

const data=ref({
  "Hid": 0,
  "Hname": "",
  "Hmoney": "",
  "Homenum": 0,
  "Htype": true,
  "Homename": "",
  "Isdelete": false
})

const vv=ref(["101","102","103","104","105","106","107","108"])

onMounted(() => {
    fan()
})

const fan=()=>{
    var val= route.query.id;
    
    axios.get("https://localhost:7056/api/House/Fan",{params:{id:val}}).then(res=>{
        
        data.value=res.data

        fang.value=data.value.Homename.split(",")
    })
}

const update=()=>{
    debugger
    data.value.Homename=fang.value
    data.value.Homenum=fang.value.length
        alert(data.value.Homenum);
    if(data.value.Hname=="")
    {
        alert("房间名称不能为空");
        return;
    }

    if(data.value.Homenum<1)
    {
        alert("房间号的勾选不能少于一个");
        return;
    }
    axios.post("https://localhost:7056/api/House/Update",data.value).then(res=>{
        if(res.data>0)
        {
            alert("修改成功")
            router.push({path:"/"})
        }
        else
        {
            alert("修改失败");
        }
    })
}

</script>

<style scoped>

</style>